<template>
  <view class="demo-container">
    <!-- 搜索区域 -->
    <view class="demo-search">
      <view class="demo-search__wrapper">
        <input 
          class="demo-search__input"
          type="text"
          v-model="searchText"
          placeholder="搜索组件"
          @input="onSearch"
        />
        <view 
          v-if="searchText"
          class="demo-search__clear"
          @tap="clearSearch"
        >
          <fu-icon name="close" size="34" color="#999"></fu-icon>
        </view>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <template v-if="searchText">
      <view class="demo-group" v-if="searchResults.length">
        <view class="demo-group__title">搜索结果</view>
        <view class="demo-group__content">
          <view 
            v-for="item in searchResults" 
            :key="item.name"
            class="demo-item"
            @tap="navTo(item.path)"
          >
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
      <view v-else class="demo-empty">
        <text class="demo-empty__text">未找到相关组件</text>
      </view>
    </template>
    
    <!-- 常规展示 -->
    <template v-else>
      <!-- 基础组件 -->
      <view class="demo-group">
        <view class="demo-group__title">基础组件</view>
        <view class="demo-group__content">
          <view class="demo-item" 
                v-for="item in basicComponents" 
                :key="item.name"
                @click="navTo(item.path)">
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
      
      <!-- 表单组件 -->
      <view class="demo-group">
        <view class="demo-group__title">表单组件</view>
        <view class="demo-group__content">
          <view class="demo-item" 
                v-for="item in formComponents" 
                :key="item.name"
                @click="navTo(item.path)">
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
      
      <!-- 反馈组件 -->
      <view class="demo-group">
        <view class="demo-group__title">反馈组件</view>
        <view class="demo-group__content">
          <view class="demo-item" 
                v-for="item in feedbackComponents" 
                :key="item.name"
                @click="navTo(item.path)">
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>

      <!-- 数据组件 -->
      <view class="demo-group">
        <view class="demo-group__title">数据组件</view>
        <view class="demo-group__content">
          <view class="demo-item" 
                v-for="item in dataComponents" 
                :key="item.name"
                @click="navTo(item.path)">
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>

      <!-- 布局组件 -->
      <view class="demo-group">
        <view class="demo-group__title">布局组件</view>
        <view class="demo-group__content">
          <view class="demo-item" 
                v-for="item in layoutComponents" 
                :key="item.name"
                @click="navTo(item.path)">
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>

      <!-- 其他组件 -->
      <view class="demo-group">
        <view class="demo-group__title">其他组件</view>
        <view class="demo-group__content">
          <view class="demo-item" v-for="item in otherComponents" :key="item.name" @click="navTo(item.path)">
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>

      <!-- 业务组件 -->
      <view class="demo-group">
        <view class="demo-group__title">业务组件</view>
        <view class="demo-group__content">
          <view class="demo-item" v-for="item in businessComponents" :key="item.name" @click="navTo(item.path)">
            <text class="demo-item__title">{{ item.title }}</text>
            <text class="demo-item__desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
/**
 * Fu UI 组件示例首页
 * @description 展示所有组件的分类导航
 */
export default {
  data() {
    return {
      searchText: '',
      // 基础组件
      basicComponents: [
        {
          name: 'button',
          title: 'Button 按钮',
          desc: '常用的操作按钮',
          path: '/pages/demo/button/index'
        },
        {
          name: 'icon',
          title: 'Icon 图标',
          desc: '图标集合',
          path: '/pages/demo/icon/index'
        },
        {
          name: 'text',
          title: 'Text 文本',
          desc: '文本样式',
          path: '/pages/demo/text/index'
        },
        {
          name: 'icon',
          title: 'Icon 图标',
          desc: '图标集合',
          path: '/pages/demo/icon/index'
        },
        {
          name: 'badge',
          title: 'Badge 徽章',
          desc: '徽章组件',
          path: '/pages/demo/badge/index'
        },
        {
          name: 'tag',
          title: 'Tag 标签',
          desc: '标签组件',
          path: '/pages/demo/tag/index'
        }
      ],
      // 表单组件
      formComponents: [
        {
          name: 'input',
          title: 'Input 输入框',
          desc: '单行文本输入',
          path: '/pages/demo/input/index'
        },
        {
          name: 'field',
          title: 'Field 表单',
          desc: '表单组件',
          path: '/pages/demo/field/index'
        },
        {
          name: 'textarea',
          title: 'Textarea 文本框',
          desc: '多行文本输入',
          path: '/pages/demo/textarea/index'
        },
        {
          name: 'radio',
          title: 'Radio 单选框',
          desc: '在一组选项中进行单选',
          path: '/pages/demo/radio/index'
        },
        {
          name: 'checkbox',
          title: 'Checkbox 复选框',
          desc: '在一组选项中进行多选',
          path: '/pages/demo/checkbox/index'
        },
        {
          name: 'switch',
          title: 'Switch 开关',
          desc: '用于在两种状态之间切换',
          path: '/pages/demo/switch/index'
        },
        {
          name: 'rate',
          title: 'Rate 评分',
          desc: '评分组件',
          path: '/pages/demo/rate/index'
        },
        {
          name: 'slider',
          title: 'Slider 滑块',
          desc: '滑块组件',
          path: '/pages/demo/slider/index'
        },
        {
          name: 'number-box',
          title: 'NumberBox 数字输入框',
          desc: '数字输入框组件',
          path: '/pages/demo/number-box/index'
        },
        {
          name: 'form',
          title: 'Form 表单',
          desc: '表单组件',
          path: '/pages/demo/form/index'
        },
        {
          name: 'upload',
          title: 'Upload 上传',
          desc: '上传组件',
          path: '/pages/demo/upload/index'
        },
        {
          name: 'picker',
          title: 'Picker 选择器',
          desc: '选择器组件',
          path: '/pages/demo/picker/index'
        },
        {
          name: 'calendar',
          title: 'Calendar 日历',
          desc: '日历组件',
          path: '/pages/demo/calendar/index'
        },
        {
          name: 'keyboard',
          title: 'Keyboard 键盘',
          desc: '键盘组件',
          path: '/pages/demo/keyboard/index'
        },
        {
          name: 'datetime-picker',
          title: 'DatetimePicker 日期时间选择器',
          desc: '日期时间选择器组件',
          path: '/pages/demo/datetime-picker/index'
        },
        {
          name: 'search',
          title: 'Search 搜索',
          desc: '搜索组件',
          path: '/pages/demo/search/index'
        },
        {
          name: 'code-input',
          title: 'CodeInput 验证码输入',
          desc: '验证码输入组件',
          path: '/pages/demo/code-input/index'
        }
      ],
      // 反馈组件
      feedbackComponents: [
        {
          name: 'toast',
          title: 'Toast 轻提示',
          desc: '轻量级反馈提示',
          path: '/pages/demo/toast/index'
        },
        {
          name: 'loading',
          title: 'Loading 加载',
          desc: '加载动画',
          path: '/pages/demo/loading/index'
        },
        {
          name: 'popup',
          title: 'Popup 弹出框',
          desc: '弹出框组件',
          path: '/pages/demo/popup/index'
        },
        {
          name: 'action-sheet',
          title: 'ActionSheet 动作面板',
          desc: '动作面板组件',
          path: '/pages/demo/action-sheet/index'
        },
        {
          name: 'alert',
          title: 'Alert 警告',
          desc: '警告组件',
          path: '/pages/demo/alert/index'
        },
        {
          name: 'toast',
          title: 'Toast 轻提示',
          desc: '轻量级反馈提示',
          path: '/pages/demo/toast/index'
        },
        {
          name: 'snackbar',
          title: 'Snackbar 消息',
          desc: '消息组件',
          path: '/pages/demo/snack-bar/index'
        },
        {
          name: 'dialog',
          title: 'Dialog 对话框',
          desc: '对话框组件',
          path: '/pages/demo/dialog/index'
        },
        {
          name: 'notice-bar',
          title: 'NoticeBar 通知栏',
          desc: '通知栏组件',
          path: '/pages/demo/notice-bar/index'
        },
        {
          name: 'notify',
          title: 'Notify 通知',
          desc: '通知组件',
          path: '/pages/demo/notify/index'
        },
        {
          name: 'collapse',
          title: 'Collapse 折叠面板',
          desc: '折叠面板组件',
          path: '/pages/demo/collapse/index'
        },
        {
          name: 'pull-refresh',
          title: 'PullRefresh 下拉刷新',
          desc: '下拉刷新组件',
          path: '/pages/demo/pull-refresh/index'
        },
        {
          name: 'drag-popup',
          title: 'DragPopup 可拖动弹框',
          desc: '可拖动的底部弹框组件',
          path: '/pages/demo/drag-popup/index'
        }
      ],
      dataComponents: [
        {
          name: 'count-down',
          title: 'CountDown 倒计时',
          desc: '倒计时组件',
          path: '/pages/demo/count-down/index'
        },
        {
          name: 'number-scroll',
          title: 'NumberScroll 数字滚动',
          desc: '数字滚动组件',
          path: '/pages/demo/number-scroll/index'
        },
        {
          name: 'list',
          title: 'List 列表',
          desc: '列表组件',
          path: '/pages/demo/list/index'
        }
      ],
      layoutComponents: [
        {
          name: 'scroll-list',
          title: 'ScrollList 滚动列表',
          desc: '滚动列表组件',
          path: '/pages/demo/scroll-list/index'
        },
        {
          name: 'overlay',
          title: 'Overlay 遮罩层',
          desc: '遮罩层组件',
          path: '/pages/demo/overlay/index'
        },
        {
          name: 'grid',
          title: 'Grid 宫格',
          desc: '宫格组件',
          path: '/pages/demo/grid/index'
        },
        {
          name: 'waterfall',
          title: 'Waterfall 瀑布流',
          desc: '瀑布流组件',
          path: '/pages/demo/waterfall/index'
        },
        {
          name: 'swiper',
          title: 'Swiper 轮播图',
          desc: '轮播图组件',
          path: '/pages/demo/swiper/index'
        },
        {
          name: 'tabbar',
          title: 'Tabbar 底部导航',
          desc: '底部导航组件',
          path: '/pages/demo/tabbar/index'
        },
        {
          name: 'steps',
          title: 'Steps 步骤条',
          desc: '步骤条组件',
          path: '/pages/demo/steps/index'
        },
        {
          name: 'tabs',
          title: 'Tabs 标签页',
          desc: '标签页组件',
          path: '/pages/demo/tabs/index'
        },
        {
          name: 'segmented',
          title: 'Segmented 分段器',
          desc: '分段器组件',
          path: '/pages/demo/segmented/index'
        },
        {
          name: 'index-list',
          title: 'IndexList 索引列表',
          desc: '索引列表组件',
          path: '/pages/demo/index-list/index'
        }
      ],
      otherComponents: [
        {
          name: 'gap',
          title: 'Gap 间距',
          desc: '间距组件',
          path: '/pages/demo/gap/index'
        },
        {
          name: 'avatar',
          title: 'Avatar 头像',
          desc: '头像组件',
          path: '/pages/demo/avatar/index'
        },
        {
          name: 'image',
          title: 'Image 图片',
          desc: '图片组件',
          path: '/pages/demo/image/index'
        },
        {
          name: 'link',
          title: 'Link 链接',
          desc: '链接组件',
          path: '/pages/demo/link/index'
        },
        {
          name: 'transition',
          title: 'Transition 过渡',
          desc: '过渡组件',
          path: '/pages/demo/transition/index'
        },
        {
          name: 'load-more',
          title: 'LoadMore 加载更多',
          desc: '加载更多组件',
          path: '/pages/demo/load-more/index'
        },
        {
          name: 'pull-refresh',
          title: 'PullRefresh 下拉刷新',
          desc: '下拉刷新组件',
          path: '/pages/demo/pull-refresh/index'
        },
        
      ],
      businessComponents: [
        {
          name: 'sku',
          title: 'SKU 商品规格选择',
          desc: '商品规格选择组件',
          path: '/pages/demo/sku/index'
        },
        {
          name: 'category',
          title: 'Category 商品分类',
          desc: '垂直分类导航组件',
          path: '/pages/demo/category/index'
        },
        {
          name: 'submit-bar',
          title: 'SubmitBar 提交订单栏',
          desc: '购物车结算等场景的提交订单栏',
          path: '/pages/demo/submit-bar/index'
        },
        {
          name: 'comment-list',
          title: 'CommentList 评论列表',
          desc: '商品评论列表组件',
          path: '/pages/demo/comment-list/index'
        },
        {
          name: 'city-picker',
          title: 'CityPicker 城市选择',
          desc: '城市选择组件',
          path: '/pages/demo/city-picker/index'
        },
        {
          name: 'order-list',
          title: 'OrderList 订单列表',
          desc: '订单列表组件',
          path: '/pages/demo/order-list/index'
        }
      ]
    }
  },
  computed: {
    // 所有组件列表
    allComponents() {
      return [
        ...this.basicComponents,
        ...this.formComponents,
        ...this.feedbackComponents,
        ...this.dataComponents,
        ...this.layoutComponents,
        ...this.otherComponents,
        ...this.businessComponents
      ]
    },
    
    // 搜索结果
    searchResults() {
      if (!this.searchText) return []
      
      const searchText = this.searchText.toLowerCase()
      return this.allComponents.filter(item => {
        return item.title.toLowerCase().includes(searchText) ||
          item.desc.toLowerCase().includes(searchText) ||
          item.name.toLowerCase().includes(searchText)
      })
    }
  },
  methods: {
    // 处理搜索
    onSearch() {
      // 可以添加防抖处理
      this.handleSearch()
    },
    
    // 实际的搜索处理
    handleSearch() {
      // 这里可以添加额外的搜索逻辑
    },
    navTo(path) {
      uni.navigateTo({
        url: path
      })
    },
    // 清除搜索
    clearSearch() {
      this.searchText = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.demo-header {
  padding: 30rpx;
  background-color: #fff;
  
  .demo-title {
    font-size: var(--fu-font-size-xl);
    font-weight: bold;
    color: var(--fu-text-color);
  }
}

.demo-group {
  margin-top: 20rpx;
  background-color: #fff;
  
  &__title {
    padding: 20rpx 30rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
    border-bottom: 1px solid var(--fu-border-color);
  }
  
  &__content {
    padding: 0 30rpx;
  }
}

.demo-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx 0;
  border-bottom: 1px solid var(--fu-border-color);
  
  &:last-child {
    border-bottom: none;
  }
  
  &__title {
    font-size: var(--fu-font-size-base);
    color: var(--fu-text-color);
    margin-bottom: 10rpx;
  }
  
  &__desc {
    font-size: var(--fu-font-size-sm);
    color: var(--fu-text-color-secondary);
  }
}

.demo-search {
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  
  &__wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  &__input {
    flex: 1;
    height: 72rpx;
    padding: 0 72rpx 0 30rpx; // 右侧留出清除按钮的空间
    background-color: #f5f5f5;
    border-radius: 36rpx;
    font-size: 28rpx;
    color: var(--fu-text-color);
    
    &::placeholder {
      color: var(--fu-text-color-secondary);
    }
  }
  
  &__clear {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fu-text-color-secondary);
    font-size: 32rpx;
    
    &:active {
      opacity: 0.7;
    }
  }
}

.demo-empty {
  padding: 100rpx 0;
  text-align: center;
  
  &__text {
    font-size: 28rpx;
    color: var(--fu-text-color-secondary);
  }
}
</style> 